<template>
  <div class="secRouter">
    <div class="title">
      <ul>
        <router-link :to="v.path" v-for="(v, i) in arr" :key="i">
          {{ v.title }}
        </router-link>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [
        { title: "音乐精选", path: "/cv/plaza/threeone" },
        { title: "宝藏音乐人", path: "/cv/plaza/threetwo" },
        { title: "音乐现场", path: "/cv/plaza/threethree" },
        { title: "演唱演奏", path: "/cv/plaza/threefour" },
        { title: "云音乐出品", path: "/cv/plaza/threefive" },
        { title: "MV", path: "/cv/plaza/threesix" },
        { title: "混剪", path: "/cv/plaza/threeseven" },
        { title: "音乐推荐", path: "/cv/plaza/threeeight" },
        { title: "情感故事", path: "/cv/plaza/threenine" },
        { title: "音乐生活", path: "/cv/plaza/threeten" },
        { title: "舞蹈", path: "/cv/plaza/threeeleven" },
      ],
    };
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
.secRouter {
  background-color: #f6f6f6;
  .title {
    width: 100%;
    overflow: auto;
    position: fixed;
    top: 1.28rem;
    background-color: #f6f6f6;
    z-index: 2000;
    ul {
      white-space: nowrap;
      a {
        display: inline-block;
        font-size: 0.26rem;
        margin-bottom: 0.15rem;
        padding: 0.15rem 0.2rem;
        color: #000;
        border-radius: 0.4rem;
      }
      .router-link-active {
        background-color: #f6eff1;
        color: #e64f44;
        font-weight: 700;
      }
    }
  }
}

/*隐藏滚动条*/
::-webkit-scrollbar {
  display: none;
}
</style>